<template>
  <div class="popup-box">
    <van-popup v-model="isEnterprise"
               class="order-popup"
               position="bottom"
               style="height:100%;background:#f4f4f4;"
               color="#333"
               >
      <div class="taxes-container">
        <van-nav-bar
          class="taxse-title"
          title="企业查询结果"
          left-text="返回"
          right-text=""
          left-arrow
          :placeholder="true"
          :fixed="true"
          @click-left="onClickLeft"
        />
        <div class="taxes-list"
             v-show="list.length">
          <van-list v-model="loading"
                    :finished="finished"
                    :error.sync="error"
                    error-text="请求失败，点击重新加载"
                    finished-text=""
                    @load="onLoad">
              <!-- 中间部分 -->
              <ul>
                <li class="taxes-li"
                    v-for='(item,idx) in list'
                    :key="idx">
                    <p>{{item.entname}}</p>
                    <van-button class="sure_btn" color="#F21228" hairline round plain @click="confirm(item.id ,item.entname)">确认</van-button>
                </li>
              </ul>
          </van-list>
        </div>
      </div>    
    </van-popup>
  </div>
</template>

<script>
import Vue from 'vue'
import { getLocalEnterpriseSearchByName, getLocalEnterpriseTicketInfo } from '@/api/order/order.js'
import { Popup } from 'vant'
import { NavBar } from 'vant'

Vue.use(NavBar)
Vue.use(Popup)
export default Vue.extend({
  props: {
    isEnterpriseName: {
      type: Boolean,
      default: false
    },
    enterpriseName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isEnterprise: false,
      loading: false,
      finished: false,
      error: false,
      list: [],
      p: 2
    }
  },
  watch: {
    'isEnterpriseName'(val) {
      this.isEnterprise = val
    },
    'isEnterprise'(val) {
      this.isEnterprise = val
      this.$emit('update:isEnterpriseName', val)
    }
  },
  mouthed() {

  },
  methods: {
    confirm(id, value) {
      getLocalEnterpriseTicketInfo({ id: id }).then(res => {
        if (res.status == 1) {
          this.$emit('TicketInfo', res)
          this.onClickLeft()
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 关闭弹窗
    onClickLeft() {
      this.$parent.isEnterpriseName = false
    },
    // 获取企业税号
    getLocalEnterprise() {
      const data = {
        'enterpriseName': this.enterpriseName,
        'p': 1
      }
      getLocalEnterpriseSearchByName(data).then(res => {
        if (res.status == 1) {
          this.list = res.items
          if (this.list.length == 10) {
            this.onLoad()
          }
        } else {
          this.$Error(res.msg)
        }
      })
    },
    onLoad() {
      const data = {
        'enterpriseName': this.enterpriseName,
        'p': this.p
      }
      getLocalEnterpriseSearchByName(data).then(res => {
        this.loading = false
        if (res.items.length) {
          this.list = this.list.concat(res.items)
          this.p++
        } else {
          this.finished = true
        }
      })
        .catch(() => {
          this.error = true
        })
    }
  }

})
</script>

<style lang="scss">
@import 'src/styles/mixin';
.taxse-title{
  line-height: 90px;
  height: 90px;
  .van-nav-bar__title{
    font-size: 28px;
  }
  .van-icon,.van-nav-bar__text{
    color: #333;
    font-size: 24px;
  }
}
.taxes-container{
  margin: 110px 25px 40px;
  background: #fff;
  border-radius: 20px;
  padding:0 30px;
  .taxes-li{
    display: flex;
    height: 90px;
    border-bottom: 1px solid #ededed;
    align-items: center;
    &:last-child{
      // border-bottom: 0;
    }
    p{
      flex: 1;
      // font-size: 28px;
      @include lineClamp(26px,1,1);
      padding-right: 50px;
    }
    .sure_btn{
      display: block;
      border-radius: 25px;
      width: 100px;
      height: 50px;
      line-height: 50px;
      font-size: 24px;
    }
  }
}

</style>